@charset "utf-8";
@function r($px){
    @return ($px/40)*1rem;
}
@function px($px){
    @return ($px/2)*1px;
}
.fl{
    float:left;
}
.fr{
    float:right;
}
//头部导航开始
.navbar{
    width:100%;
    height:50px;
    background: #222222;
    border:none;
    border-radius: 0;
    box-sizing: border-box;
    margin-bottom:0;
    position:fixed;
    z-index: 999;
    top:0;
    
    
    .active{
        background: #080808;
    }
    //logo部分开始
    .navbar-header{       
        .navbar-brand{
            line-height: 50px;
            img{
                 display:inline-block;
            }          
            padding-top:0;
            padding-bottom:0;
        }
    }
    //logo部分开始
    #navbar .navbar-nav select{
       font-size: 14px;
       border:0;
       background:  #222222;
       color: #9d9d9d;
       width: 108px;
       height:50px;
       outline: none;
       cursor: pointer;
       text-align: center;
       font-weight:bold; 
       &:hover{
           color: white;
       }
       option{
           outline: none;
           background: white;
           color:black;
           border:none;
           &:hover{
               background: black;
           }
       }  
    }
    #navbar .navbar-nav > li > a {
        color: #9d9d9d;
        &:hover{
            color:white;
            background: none;
        }
    }
    .navbar-nav > .active > a{
        background: #080808;
        
    }
}
//头部导航结束


//中间主体内容部分开始
#family-content{
    margin-top:50px;

}

//猎刃2和上吧主公部分开始
.game-content{
    //公共样式猎刃部分开始
    .lieren-content{
      margin-bottom:40px;  
    }
    .lieren-left{
        width:344px;
        height:500px;
        background: url(../img/game-01.jpg) no-repeat;
        background-size: 344px 420px;
        background-position-y: 75px;;
    }
    .lieren-right{
        h3{
            text-align: right;
            font-size: 30px;
        }
        p{
            font-size: 14px;
            color:#929292;
            text-align:right;
        
           
        }
    }    
    .right-img{
        img{
            width:100%;
            border-radius: 6px;
            margin:20px 0;
            &:hover{
                opacity: 0.8;
            }
        }
    }
    //公共样式猎刃部分结束
    
    //上吧主公部分开始
    .zhugong-right-bg{
        width:344px;
        height:520px;
        background: url(../img/game-10.jpg) no-repeat;
        background-size: 328px 440px;
        background-position-y: 65px;;
    }
    .zhugong-right-text{
        h3{
            text-align:left;
        }
        p{
            text-align: left;
            
        }        
    }
    //上吧主公部分开始
}
//猎刃2和上吧主公部分结束

//游戏案例部分开始
.game-case{
    h3{
        font-size: 26px;
        margin-bottom: 20px;
    }
    .case-box{
        .img-box{
            img:hover{
                opacity: 0.8;
            }
            position:relative;
            overflow:hidden; 
            &:hover .game-desc{
                transform: translateX(0);
            }
        }
        margin-bottom:20px;
        
        img{
            width:100%;
            border-radius: 6px;
        }
        p{
            font-size: 14px;
            text-align: center;
            margin-top: 5px;
        }
    }
    .game-desc{
        width:100%;
        height:100%;
        background: black;
        opacity: 0.8;
        position:absolute;
        top:0;
        left:0;
        border-radius: 6px;
        transform:translateX(-100%) ;
        transition: all 1s;
        color:white;
        padding:10px 10px;
        line-height: r(15);
        text-align: justify;
    }
}
//游戏案例部分结束


//中间主体内容部分结束






//底部部分开始
footer{
    padding-top:r(10);
    padding-bottom:r(10);
    background: #3b3b3b;

    img{
        cursor: pointer;
    }
    .footer-left{
        margin-top:r(20);
        span{
            font-size: r(14);
            color:#a1a3ab;
        }
        p{
            font-size: r(12);
            color:#a1a3ab;
        }
    }
    .footer-right{
        margin-top:r(20);
        img{
            margin-left:r(10);
        }
        .wx{
            position:relative;
            .er{
                position:absolute;
                top:-160px;
                left:7px;
                display:none;
                
            }
        }       
    }       
}
//底部部分结束


//媒体查询部分

@media screen and (min-width:970px){
    //调整footer部分的相关元素
    footer{
        .footer-left{
            margin-top:15px;
            span{font-size: 14px;}
            p{font-size: 12px;}
        }
        .footer-right{
            margin-top:15px;
        }
    }
}

@media screen and (max-width:767px){
    //设置手机端时导航条的样式
   .navbar-nav{
       margin-top:-5px;
       margin-bottom:0;
       background: #222222;
       
   }
   //猎刃2部分开始
    .game-content{
        .lieren-left{
            width:100%;
            height:100%;
            background:none;
            background-size: 344px 420px;
            background-position-y: 35px;;
        }
    }
    
    .game-content{
        .lieren-content{
            margin-bottom:0px;  
        }
        .right-img{
            img{
                margin:10px 0;
            }
        }
    }
    //猎刃2部分结束
}

@media screen and (min-width:768px) and (max-width:992px){
    //设置尾部二维码的位置
    footer{
        .footer-right{
            .wx{
                .er{
                 top:-160px;
                    left:0px;
                 }
            }        
        }                
    }
    .game-desc{
        display:none;
    }
    //游戏内容部分开始   
    .game-content{
        .lieren-left{
            background-size: 344px 400px;
            background-position-y: 40px;;
        }
        .zhugong-right-bg{
            background: url(../img/game-10.jpg) no-repeat;
            background-size: 328px 420px;
            background-position-y: 10px;;
        }
    }
    //游戏内容部分结束 
}
@media screen and (max-width:768px){
    //设置尾部二维码的位置
    footer{
        .footer-right{
            margin-top:20px;
            .wx{
                .er{
                 top:-160px;
                    left:-5px;
                 }
            }        
        }                
    }
    .game-desc{
        display:none;
    }
}
